<template>
  <div class="publishfindowner">
    <div class="contents main clear_fix">
      <div class="give giveadopt">
        <h3>请输入宠物的信息 信息越完整， 寻找率越高</h3>
        <h4>我们提倡免费或者小偿领养送养宠物，严禁宠物买卖</h4>
        <div class="title ">
          <span>寻宠标题</span>
          <input
            type="text "
            placeholder="请输入标题 "
          >
        </div>
        <div class="introduce clear_fix ">
          <span>宠物介绍</span>
          <textarea
            name=" "
            id=" "
            placeholder="请输入内容 "
          ></textarea>
        </div>
        <div class="info clear_fix ">
          <span>宠物信息</span>
          <div class="info-list ">
            <div>
              <i>品种</i>
              <select
                name=" "
                id=" "
              >
                <option value=" ">选择品种</option>
                <option value=" ">小狗</option>
                <option value=" ">小猫</option>
              </select>
            </div>
            <div>
              <i>所在省份</i>
              <select
                name=" "
                id=" "
              >
                <option value=" ">湖南省</option>
                <option value=" ">广东省</option>
                <option value=" ">四川省</option>
                <option value=" ">河北省</option>
              </select>
            </div>
          </div>
        </div>
        <div class="concact clear_fix ">
          <span>联系人信息</span>
          <div class="concact-list ">
            <div>
              <i>送养人</i><input
                type="text "
                placeholder="请输入姓名 "
              >
            </div>
            <div>
              <i>手机号</i><input
                type="text "
                placeholder="请输入手机号 "
              >
            </div>
            <div>
              <i>微信号</i><input
                type="text "
                placeholder="请输入微信号 "
              >
            </div>
          </div>
        </div>
        <div class="photo ">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList2"
            list-type="picture"
          >
            <el-button
              size="small"
              type="primary"
            >上传图片</el-button>
            <div
              slot="tip"
              class="el-upload__tip"
            >只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </div>
        <el-button
          type="primary"
          class="btn"
          plain
        >发布</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    fileList2: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }]
  }),
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  }
}
</script>
<style lang="scss">
.publishfindowner{
  .give .photo span {
    margin: 0;
    padding: 0;
    line-height: 38px;
  }
}
</style>